import VueRouter from "vue-router"
import UserUtils from "../util/user_utils"
import SystemConstants from "../constant/system_constants"

let router = new VueRouter({
	// routes里的每个route都是默认作用于App.vue里的router-view，而比如About.vue里也有router-view则它是不会被渲染的（即等价于没写里面的router-view)
	// 如果要让其能生效，则需要在这里的component是About.vue的route对象里添加children，然后访问了对应的路径时就会在About.vue里渲染router-view【注意，渲染是路径满足子组件则父组件也会满足】
	routes: [
		{
			path: '/',
			component: () => import('../views/structure/structure.vue'),
			// 进入到根目录后会自动跳转到/dashboard页面（当然这个是前端的跳转和后端没有关系，页面内部的数据获取和后端有关）
			redirect: '/about',
			// 如果找不到匹配的子路由或没有配置某个组件的子路由，比如About.vue里有<router-view>..但是这里没有给对应About.vue的route配置children
			// ，那么显示About.vue时不会显示router-view部分，即children只会渲染到对应组件的<router-view>里，如果没有合适的则这部分不渲染（组件的其它的部分还是会渲染的）
			children: [
				{
					path: '/user',
					component: () => import('../views/structure/content/user/user.vue'),
					meta: {title: '用户管理', permission: true, roles: ['admin']}
				},
				{
					path: '/about',
					component: () => import('../views/structure/content/about/about.vue'),
					meta: {title: '关于', permission: false}
				}
			]
		},
		// /login和/同级，所以它也是渲染在App.vue的<router-view>里的
		{
			path: '/login',
			component: () => import('../views/login/login.vue'),
			meta: {title: '登录', permission: false}
		},
		{
			path: '/404',
			// 延迟加载
			component: () => import('../views/404/404.vue'),
			meta: {title: '404', permission: false}
		},
		{
			path: '*',
			redirect: '/404'
		}
	]
})

// 在正式“跳转页面”之前执行一些判断操作，确认是否需要跳转，同时还能改变页面的一些属性
router.beforeEach((to, from, next) => {

	// 执行这个方法时已经到达了“跳转页面”的临界点，所以这里改了title如果成功跳转到to则正常显示，如果不是跳转到to
	// ，比如跳转的是next('/login')它也会执行这个方法，因此title仍然能够得到修正
	if (to.meta !== null && to.meta !== undefined && to.meta.title !== null) {
		// 是单页应用，所以都是一个title
		document.title = `${to.meta.title} | ${SystemConstants.SYS_TITLE}`
	}

	// to路径匹配到的所有path里存在一个需要permission，比如to是/user/aa，那么user如果需要permission，/user/aa也是要的
	// some方法对应的是every，表示每个都要符合条件
	if (to.meta != null && to.matched.some(record => record.meta.permission)) {
		if (UserUtils.hasLogin()) {
			next()
		} else {
			next({
				path: '/login',
				query: {redirect: to.fullPath}
			})
		}
	} else {
		if (to.fullPath === '/login') {
			next({
				path: '/login',
				query: {redirect: (from.fullPath || '/')}
			})
		} else {
			next()
		}
	}
})

export default router